<template>
	<!-- 金刚区 -->
	<view class="kingAreaWp">
		<view class="kingArea" v-for="item in list" :key="item.title" @click="handleItem(item)">
			<view class="imgWp">
				<image :src="item.icon" alt="">
			</view>
			<view class="text">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "kingArea",
		data() {
			return {};
		},
		props: {
			list: {
				type: Array,
				default: () => [],
				required: true
			}
		},
		methods: {
			handleItem(item) {
				// console.log(item);
				this.$emit('handleKingAreaItem', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	//金刚区
	.kingAreaWp {
		// margin-top: 68rpx;
		height: 178rpx;
		// padding: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 0;

		.kingArea {
			flex: 1;

			.clicking {
				opacity: 0.7;
				box-shadow: 0rpx 0rpx 5rpx #9c9c9c;
			}

			.imgWp {
				margin: 0 auto;
				width: 80rpx;
				height: 80rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				text-align: center;
				margin-top: 16rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				color: #1D2129;
			}

		}


	}
</style>